<template>
    <div>
        <button @click="goHome">返回首页</button>
        <h1>详情组件</h1>
        <h1>{{$route.params.id}}</h1>
        <!-- <h1>{{result.name}}</h1> -->
        <h1>{{detail.hobby}}</h1>
        <h1>{{detail.age1}}</h1>
    </div>
</template>
<!-- 
    编程式路由导航 利用的就是history
    go back forward
    pushState replaceState

    this.$router.back()  返回上一级
    this.$router.forward() 下一级
    this.$router.go()  正数 下一级 负数 返回上一级
    this.$router.push() 在历史记录当中插入某个路径 能返回
    this.$router.replace()  替换当前历史记录 不能返回
-->

<script>
export default {
    data() {
        return {
            studentDetail:[
            {
            id: '01',
            name: 'jiaxing',
            detail: {
                age1: 18,
                hobby: '爱丁丹雪'
            }
        }, {
            id: '02',
            name: 'danxue',
            detail: {
                age1: 18,
                hobby: '肤白貌美大长腿'
            }
        }, {
            id: '03',
            name: 'yixingbanding',
            detail:{
                age1:3,
                hobby:'love parents'
            }
        }
            ],
            resulu:{},
            detail:{}
        }

    },
    mounted(){
        // 在挂载当中进行首次渲染
        // 从studentdetail中查找学号为$toute.query.id的值
        // 本质 数组当中查找符合条件的某些
        // find
        console.log(this.studentDetail);
        // 由于mounted只挂载一次 不能及时更新数据
        // $route.query.id是不断发生变化的 一点击就变
        // 思路：当$route.query.id发生变化触发更新操作
        this.showItem(this.$route);
    },
    watch:{
        $route(value){
            console.log(value);
        //     this.result = this.studentDetail.find((item)=>{
        //     return item.id == value.parrams.id
        // });
        this.showItem(value);
        }
    },
    methods:{
        showItem(value){
            this.result = this.studentDetail.find((item)=>{
            return item.id == value.params.id
        });
        this.detail = this.result.detail;
        },
        goHome(){
            console.log(this.$router);
            this.$router.back();
        }
    }
}
</script>

<style lang="scss" scoped>

</style>